// 全局数据配置（包含地图数据）
const dataConfig = {
    30: {
        core: {
            totalPeople: "1,287,542",
            peopleGrowth: "同比 ↑32.6%",
            totalEvents: "1,856",
            eventsGrowth: "同比 ↑18.3%",
            totalCoverage: "25.6 亿",
            coverageGrowth: "同比 ↑42.1%"
        },
        styleRatio: { ming: 38, tang: 27, song: 22, other: 13 },
        storeData: [
            { name: "长安汉服体验馆", people: 1256, events: 28 },
            { name: "江南汉服研习社", people: 987, events: 22 },
            { name: "京华汉服中心", people: 865, events: 18 },
            { name: "岭南汉风体验馆", people: 754, events: 15 },
            { name: "蜀地汉服工作室", people: 632, events: 12 }
        ],
        eventData: [
            { rank: 1, name: "中国汉服文化节", city: "西安", people: 12500, spread: "2.8亿" },
            { rank: 2, name: "江南汉服雅集", city: "苏州", people: 8900, spread: "1.9亿" },
            { rank: 3, name: "明制汉服研习会", city: "北京", people: 7500, spread: "1.5亿" },
            { rank: 4, name: "宋韵文化节", city: "杭州", people: 6800, spread: "1.2亿" },
            { rank: 5, name: "大唐不夜城活动", city: "西安", people: 6200, spread: "1.1亿" }
        ],
        ageData: [12, 45, 28, 10, 5],
        bottom: {
            socialTopic: "12.8 亿", videoPlay: "8.6 亿",
            lectureNum: "328", cooperOrg: "156 家", schoolEvent: "215 场"
        },
        // 地图数据（30天）
        mapData: [
            { name: "北京", value: 190 }, { name: "上海", value: 175 },
            { name: "江苏", value: 185 }, { name: "浙江", value: 170 },
            { name: "陕西", value: 210 }, { name: "四川", value: 150 },
            { name: "广东", value: 165 }, { name: "湖南", value: 130 }
        ]
    },
    90: {
        core: {
            totalPeople: "3,568,219",
            peopleGrowth: "同比 ↑28.9%",
            totalEvents: "4,982",
            eventsGrowth: "同比 ↑16.7%",
            totalCoverage: "68.3 亿",
            coverageGrowth: "同比 ↑38.5%"
        },
        styleRatio: { ming: 39, tang: 26, song: 23, other: 12 },
        storeData: [
            { name: "长安汉服体验馆", people: 3680, events: 75 },
            { name: "江南汉服研习社", people: 2850, events: 62 },
            { name: "京华汉服文化中心", people: 2490, events: 53 },
            { name: "岭南汉风体验馆", people: 2180, events: 46 },
            { name: "蜀地汉服工作室", people: 1850, events: 38 }
        ],
        eventData: [
            { rank: 1, name: "中国汉服文化节", city: "西安", people: 35800, spread: "7.6亿" },
            { rank: 2, name: "江南汉服雅集", city: "苏州", people: 25600, spread: "5.2亿" },
            { rank: 3, name: "明制汉服研习会", city: "北京", people: 21800, spread: "4.3亿" },
            { rank: 4, name: "宋韵文化节", city: "杭州", people: 19500, spread: "3.5亿" },
            { rank: 5, name: "大唐不夜城活动", city: "西安", people: 17800, spread: "3.1亿" }
        ],
        ageData: [13, 44, 29, 11, 3],
        bottom: {
            socialTopic: "35.2 亿", videoPlay: "23.8 亿",
            lectureNum: "896", cooperOrg: "183 家", schoolEvent: "587 场"
        },
        // 地图数据（90天）
        mapData: [
            { name: "北京", value: 530 }, { name: "上海", value: 490 },
            { name: "江苏", value: 510 }, { name: "浙江", value: 475 },
            { name: "陕西", value: 580 }, { name: "四川", value: 410 },
            { name: "广东", value: 460 }, { name: "湖南", value: 360 }
        ]
    },
    365: {
        core: {
            totalPeople: "15,872,364",
            peopleGrowth: "同比 ↑25.3%",
            totalEvents: "21,548",
            eventsGrowth: "同比 ↑14.2%",
            totalCoverage: "298.7 亿",
            coverageGrowth: "同比 ↑33.8%"
        },
        styleRatio: { ming: 40, tang: 25, song: 22, other: 13 },
        storeData: [
            { name: "长安汉服体验馆", people: 15680, events: 320 },
            { name: "江南汉服研习社", people: 12580, events: 285 },
            { name: "京华汉服文化中心", people: 10850, events: 246 },
            { name: "岭南汉风体验馆", people: 9680, events: 215 },
            { name: "蜀地汉服工作室", people: 8250, events: 182 }
        ],
        eventData: [
            { rank: 1, name: "中国汉服文化节", city: "西安", people: 156800, spread: "32.8亿" },
            { rank: 2, name: "江南汉服雅集", city: "苏州", people: 125600, spread: "27.5亿" },
            { rank: 3, name: "明制汉服研习会", city: "北京", people: 108500, spread: "22.3亿" },
            { rank: 4, name: "宋韵文化节", city: "杭州", people: 96800, spread: "18.6亿" },
            { rank: 5, name: "大唐不夜城活动", city: "西安", people: 89200, spread: "16.9亿" }
        ],
        ageData: [15, 42, 28, 12, 3],
        bottom: {
            socialTopic: "156.8 亿", videoPlay: "108.5 亿",
            lectureNum: "3856", cooperOrg: "218 家", schoolEvent: "2568 场"
        },
        // 地图数据（365天）
        mapData: [
            { name: "北京", value: 2260 }, { name: "上海", value: 2080 },
            { name: "江苏", value: 2180 }, { name: "浙江", value: 2050 },
            { name: "陕西", value: 2450 }, { name: "四川", value: 1750 },
            { name: "广东", value: 1980 }, { name: "湖南", value: 1560 }
        ]
    }
};

// 图表实例全局存储
let ringChart, barChart;

// 页面加载完成后初始化
window.onload = function() {
    const initPeriod = "30";
    initRingChart(initPeriod);
    initLeftTable(initPeriod);
    initMapChart(initPeriod); // 调用mapChart.js中的地图初始化函数
    initRightTable(initPeriod);
    initBarChart(initPeriod);
    updateCoreData(initPeriod);
    updateStyleRatio(initPeriod);
    updateBottomIndicators(initPeriod);
    bindTimeFilterEvent();
};

// 时间筛选切换事件
function bindTimeFilterEvent() {
    const timeSpans = document.querySelectorAll('.time-filter span');
    timeSpans.forEach(span => {
        span.addEventListener('click', function() {
            timeSpans.forEach(s => s.classList.remove('active'));
            this.classList.add('active');
            const period = this.getAttribute('data-period');
            updateCoreData(period);
            updateStyleRatio(period);
            initRingChart(period);
            initLeftTable(period);
            initMapChart(period); // 切换时间时更新地图
            initRightTable(period);
            initBarChart(period);
            updateBottomIndicators(period);
        });
    });
}

// 更新顶部核心数据
function updateCoreData(period) {
    const data = dataConfig[period].core;
    document.getElementById('totalPeople').textContent = data.totalPeople;
    document.getElementById('peopleGrowth').textContent = data.peopleGrowth;
    document.getElementById('totalEvents').textContent = data.totalEvents;
    document.getElementById('eventsGrowth').textContent = data.eventsGrowth;
    document.getElementById('totalCoverage').textContent = data.totalCoverage;
    document.getElementById('coverageGrowth').textContent = data.coverageGrowth;
}

// 更新汉服风格占比文字
function updateStyleRatio(period) {
    const ratio = dataConfig[period].styleRatio;
    document.getElementById('styleMing').textContent = ratio.ming + "%";
    document.getElementById('styleTang').textContent = ratio.tang + "%";
    document.getElementById('styleSong').textContent = ratio.song + "%";
    document.getElementById('styleOther').textContent = ratio.other + "%";
}

// 更新底部指标数据
function updateBottomIndicators(period) {
    const data = dataConfig[period].bottom;
    document.getElementById('socialTopic').textContent = data.socialTopic;
    document.getElementById('videoPlay').textContent = data.videoPlay;
    document.getElementById('lectureNum').textContent = data.lectureNum;
    document.getElementById('cooperOrg').textContent = data.cooperOrg;
    document.getElementById('schoolEvent').textContent = data.schoolEvent;
}

// 环形图（汉服风格占比）
function initRingChart(period) {
    const dom = document.getElementById('ring-chart');
    if (ringChart) ringChart.dispose();
    ringChart = echarts.init(dom);
    const ratio = dataConfig[period].styleRatio;

    const option = {
        backgroundColor: 'transparent',
        tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c}%' },
        series: [{
            name: '汉服风格',
            type: 'pie',
            radius: ['65%', '85%'],
            center: ['50%', '50%'],
            data: [
                { value: ratio.ming, name: '明制', itemStyle: { color: '#d8b4fe' } },
                { value: ratio.tang, name: '唐制', itemStyle: { color: '#b3d1ff' } },
                { value: ratio.song, name: '宋制', itemStyle: { color: '#c8e6c9' } },
                { value: ratio.other, name: '其他', itemStyle: { color: '#ffd700' } }
            ],
            label: {
                color: '#FFFFFF',
                textShadow: '0 0 4px rgba(255,255,255,0.6)'
            }
        }]
    };

    ringChart.setOption(option);
    window.addEventListener('resize', () => ringChart.resize());
}

// 左侧表格（文化体验店数据）
function initLeftTable(period) {
    const tableBody = document.querySelector('#left-table tbody');
    tableBody.innerHTML = '';
    dataConfig[period].storeData.forEach(item => {
        const tr = document.createElement('tr');
        tr.innerHTML = `<td>${item.name}</td><td>${item.people}</td><td>${item.events}</td>`;
        tableBody.appendChild(tr);
    });
}

// 右侧表格（热门活动TOP10）
function initRightTable(period) {
    const tableBody = document.querySelector('#right-table tbody');
    tableBody.innerHTML = '';
    dataConfig[period].eventData.forEach(item => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>${item.rank}</td>
            <td>${item.name}</td>
            <td>${item.city}</td>
            <td>${item.people}</td>
            <td>${item.spread}</td>
        `;
        tableBody.appendChild(tr);
    });
}

// 柱状图（参与人群年龄分布）
function initBarChart(period) {
    const dom = document.getElementById('bar-chart');
    if (barChart) barChart.dispose();
    barChart = echarts.init(dom);

    const option = {
        backgroundColor: 'transparent',
        grid: { left: '10%', right: '5%', bottom: '15%', top: '5%' },
        xAxis: {
            type: 'category',
            data: ['18岁以下', '18-25岁', '26-35岁', '36-45岁', '45岁以上'],
            axisLine: { lineStyle: { color: '#4A90E2' } },
            axisLabel: {
                color: '#FFFFFF',
                textShadow: '0 0 4px rgba(255,255,255,0.6)'
            }
        },
        yAxis: {
            type: 'value',
            name: '占比(%)',
            nameTextStyle: {
                color: '#5BC0DE',
                textShadow: '0 0 6px rgba(91,202,222,0.6)'
            },
            axisLine: { lineStyle: { color: '#4A90E2' } },
            axisLabel: {
                color: '#FFFFFF',
                textShadow: '0 0 4px rgba(255,255,255,0.6)'
            }
        },
        series: [{
            type: 'bar',
            data: dataConfig[period].ageData,
            itemStyle: { color: '#d8b4fe' },
            barWidth: 30,
            label: {
                show: true,
                color: '#FFFFFF',
                textShadow: '0 0 4px rgba(255,255,255,0.6)'
            }
        }]
    };

    barChart.setOption(option);
    window.addEventListener('resize', () => barChart.resize());
}